import React, { Component } from 'react'
import { Flex } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import './index.scss'

class SearchHeader extends Component {
  render() {
    return (
      <Flex className={['search-box', this.props.className || ''].join(' ')}>
        {/* 左侧搜索区域 */}
        <Flex className="search">
          {/* 左侧搜索区域-位置搜索 */}
          <div
            className="location"
            onClick={() => this.props.history.push('/citylist')}
          >
            <span className="name">{this.props.curentCityName}</span>
            <i className="iconfont icon-arrow"></i>
          </div>
          {/* 左侧搜索区域-位置搜索表单 */}
          <div
            className="form"
            onClick={() => this.props.history.push('/search')}
          >
            <i className="iconfont icon-seach"></i>
            <span className="text">请输入小区或地址</span>
          </div>
        </Flex>
        {/* 右侧地图区域 */}
        <i
          className="iconfont icon-map"
          onClick={() => this.props.history.push('/map')}
        ></i>
      </Flex>
    )
  }
}
SearchHeader.propTypes = {
  curentCityName: PropTypes.string.isRequired,
  className: PropTypes.string,
}

export default withRouter(SearchHeader)
